<template>
	<view>
		<template v-if="list.length > 0">
			<block v-for="(item,index) in list" :key="index">
				<!-- 消息列表组件 -->
				<msg-list :item="item" :index="index"></msg-list>
			</block>
		</template>
		<template v-else>
			<no-thing></no-thing>
		</template>
		<uni-popup ref="popup" type="top">
			<!-- 注意：弹出层的背景是透明的，不知道是什么原因，这里暂时通过添加bg-light样式来解决 -->
			<view class="flex align-center justify-center font-md py-1 bg-light border-bottom" @click="popupEvent('friend')">
				<text class="iconfont icon-sousuo mr-2"></text>搜索好友
			</view>
			<view class="flex align-center justify-center font-md py-1 bg-light" @click="popupEvent('clear')">
				<text class="iconfont icon-shanchu mr-2"></text> 删除列表
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const demo = [{
		avatar: '/static/default.jpg',
		username: '昵称',
		update_time: 1570718427,
		data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
		noread: 20
	}, {
		avatar: '/static/default.jpg',
		username: '昵称',
		update_time: 1570718427,
		data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
		noread: 20
	}, {
		avatar: '/static/default.jpg',
		username: '昵称',
		update_time: 1570718427,
		data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
		noread: 20
	}, {
		avatar: '/static/default.jpg',
		username: '昵称',
		update_time: 1570718427,
		data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
		noread: 20
	}]
	import msgList from '@/components/msg/msg-list.vue'
	import noThing from '@/components/common/no-thing.vue'
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	export default {
		components: {
			msgList,
			noThing,
			uniPopup
		},
		data() {
			return {
				list: []
			}
		},
		// 页面加载
		onLoad() {
			this.list = demo
		},
		// 监听下拉刷新事件
		onPullDownRefresh() {
			this.refresh()
		},
		// 监听原生导航按钮事件
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 0: // 左边按钮
					uni.navigateTo({
						url: '../user-list/user-list'
					});
					this.$refs.popup.close()
					break;
				case 1: // 右边按钮
					this.$refs.popup.open()
					break;
			}
		},
		methods: {
			refresh() {
				setTimeout(() => {
					this.list = demo
					uni.stopPullDownRefresh()
				}, 1000);
			},
			// 弹出层选项点击事件
			popupEvent(e) {
				switch (e) {
					case 'friend':
						console.log('搜索好友')
						uni.navigateTo({
							url: '../search/search?type=user'
						});
						break;
					case 'clear':
						console.log('清除列表')
						break;
				}
				// 关闭弹出层
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>

</style>
